<template>
  <view class="h-inherit">
    <view class="user-section">
      <!-- <view class="text-right m-t-5px m-b-25px">
        <van-icon name="setting-o" color="white" size="20px" />
      </view> -->
      <view class="flex justify-between items-center text-white m-t10px">
        <view class="flex flex-col">
          <text class="text-24px">陈胜利</text>
          <text class="text-gray-2 m-t-6px">项目经理</text>
        </view>
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </view>
    </view>

    <view class="m-t--15px user-bottom">
      <view class="p-15px user-card bg-white">
        <view class="flex justify-between p-5px">
          <view class="flex flex-col items-center" v-for="item in cardList" :key="item.type">
            <image class="w-26px" mode="widthFix" :src="`/static/img/${item.icon}.png`" />
            <text class="text-gray-7 m-t-5px text-14px">{{ item.label }}</text>
          </view>
        </view>
      </view>
      <van-cell-group inset>
        <van-cell title="联系方式" is-link value="133xxxxxxxx" icon="phone-circle-o" />
        <van-cell title="所属公司" is-link value="xxxx建筑有限公司" icon="hotel-o" />
        <van-cell title="联系方式" is-link value="133xxxxxxxx" icon="phone-circle-o" />
        <van-cell title="所属公司" is-link value="xxxx建筑有限公司" icon="hotel-o" />
      </van-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        { type: 'msg', label: '消息', icon: 'msg' },
        { type: 'book', label: '通讯录', icon: 'book' },
        { type: 'project', label: '项目', icon: 'project' },
        { type: 'setting', label: '设置', icon: 'setting' },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.user-section {
  background-color: var(--bg-color);
  padding: 15px 15px 55px 15px;
}
.user-bottom {
    position: relative;
    top: -20px;
    .user-card {
      margin: 0 15px 20px 15px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }
  }
</style>